<template>
  <el-dialog :title="formConfig.title" v-model="visible" width="600px" center>
    <el-form ref="formRef" v-if="visible" :model="formObj" label-width="120px">
      <el-form-item
        v-for="item in formConfig.items"
        :key="item.name"
        :label="item.label"
        :prop="item.name"
        status-icon
        :rules="[...item.rules]"
      >
        <!--根据type来显示是控件-->
        <el-input
          v-if="item.type === 'hidden'"
          v-model="formObj[item.name]"
          type="hidden"
        ></el-input>
        <el-input
          v-if="item.type === 'input'"
          v-model="formObj[item.name]"
          :placeholder="item.placeholder || `请输入${item.label}`"
          :disabled="item.disabled"
          allow-clear
        ></el-input>
        <el-input
          v-if="item.type === 'password'"
          v-model="formObj[item.name]"
          :placeholder="item.placeholder || `请输入${item.label}`"
          type="password"
        ></el-input>
        <el-select
          v-else-if="item.type === 'select'"
          v-model="formObj[item.name]"
          :placeholder="item.placeholder || `请选择${item.label}`"
          :disabled="item.disabled"
        >
          <el-option
            v-for="o in item.options"
            :key="o.value"
            :value="o.value"
            :label="o.label"
          />
        </el-select>
        <el-input-number
          v-else-if="item.type === 'number'"
          v-model.number="formObj[item.name]"
          :placeholder="item.placeholder || `请输入${item.label}`"
          :disabled="item.disabled"
          :min="item.min"
          :max="item.max"
        />
        <el-date-picker
          v-else-if="item.type === 'datetime'"
          v-model="formObj[item.name]"
          :placeholder="item.placeholder || `请选择${item.label}`"
          :disabled="item.disabled"
          :disabledDate="item.disabledDate"
        />
        <el-input
          v-else-if="item.type === 'textarea'"
          :disabled="item.disabled"
          v-model="formObj[item.name]"
          :rows="3"
          type="textarea"
          :placeholder="item.placeholder || `请输入${item.label}`"
        />
        <el-radio-group
          v-else-if="item.type === 'radio'"
          v-model="formObj[item.name]"
        >
          <el-radio
            v-for="item in item.options"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel(formRef)">取消</el-button>
        <el-button type="primary" @click="submit(formRef)">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import _ from "lodash";
import { reactive, ref, toRefs } from "vue";

export default {
  emits: ["submit"],
  props: {
    formConfig: {
      required: true,
      type: Object,
    },
  },
  setup(props, context) {
    const formRef = ref(null);
    const formConfig = props.formConfig;

    // 根据传参构建对象
    const initObj = _.reduce(
      formConfig.items,
      (arr, o) => {
        arr[o.name] = null;
        return arr;
      },
      {}
    );

    const state = reactive({ formObj: initObj, visible: false });

    const handleOpenForm = (obj = {}) => {
      state.visible = true;
      state.formObj = { ...initObj, ...obj };
    };

    const submit = (formEl) => {
      formEl.validate((valid, fields) => {
        if (valid) {
          context.emit("submit", { ...state.formObj, ...fields });
        }
      });
    };

    const cancel = (formEl) => {
      formEl.resetFields();
      state.visible = false;
    };

    return {
      formRef,
      ...toRefs(state),
      formConfig,
      handleOpenForm,
      submit,
      cancel,
    };
  },
};
</script>
<style lang="less" scoped></style>
